import React, { useState, useMemo, useRef, useEffect } from 'react';
import { Text, View, Image, ScrollView } from '@ray-js/ray';
import Strings from '@/i18n';
import _ from 'lodash';
import { Tabs, Tab } from '@ray-js/smart-ui';
import { getCachedSystemInfo } from '@/api/getCachedSystemInfo';

import styles from './index.module.less';
import res from '../../../public/noiceImage';

const { safeArea } = getCachedSystemInfo();

const { height } = safeArea;

export const SongList1 = new Array(9).fill(1).map((item, index) => {
  return {
    name: Strings.getLang(`song_1_${index + 1}`),
    imageActive: res[`aa_${index + 1}`],
    image: res[`aa_${index + 1}_2`],
    key: `song_1_${index + 1}`,
  };
});

export const SongList2 = new Array(14).fill(1).map((item, index) => {
  return {
    name: Strings.getLang(`song_2_${index + 1}`),
    imageActive: res[`bb_${index + 1}`],
    image: res[`bb_${index + 1}_2`],
    key: `song_2_${index + 1}`,
  };
});

export const SongList3 = new Array(9).fill(1).map((item, index) => {
  return {
    name: Strings.getLang(`song_3_${index + 1}`),
    imageActive: res[`cc_${index + 1}`],
    image: res[`cc_${index + 1}_2`],
    key: `song_3_${index + 1}`,
  };
});

export const allList = [...SongList1, ...SongList2, ...SongList3];

export const getCurrentByIndex = (index: number) => {
  return allList[index - 1] || allList[0];
};

export function SongSet({
  current,
  onSongeChange,
}: {
  current: number;
  onSongeChange: (val: number) => void;
}) {
  const [active, setActive] = useState(0);

  const lastTab = useRef(0);

  useEffect(() => {
    console.log('🚀 ~ file: index.tsx:50 ~ current:', current, lastTab.current);

    if (lastTab.current === 0) {
      return;
    }
    if (current <= SongList1.length) {
      setActive(1);
    } else if (current <= SongList1.length + SongList2.length) {
      setActive(2);
      console.log('current', current);
    } else {
      setActive(3);
    }
  }, [current]);

  const currentIndex = useMemo(() => {
    if (active === 0) {
      return current - 1;
    }
    if (active === 1) {
      return current - 1;
    }
    if (active === 2) {
      return current - SongList1.length - 1;
    }
    return current - SongList1.length - SongList2.length - 1;
  }, [current, active]);

  const onChange = e => {
    setActive(e.detail.index);
    lastTab.current = e.detail.index;
  };

  return (
    <View className={styles.container}>
      <Tabs active={active} onChange={onChange}>
        <Tab title={Strings.getLang('tab_all')}>
          <ScrollView
            scrollY
            style={{
              height: `calc(${height}px - 425px)`,
            }}
          >
            <View
              className={styles.songListBox}
              style={{
                height: `calc(${height} - 425px)`,
              }}
            >
              {allList.map((item, index) => {
                const isActive = index === currentIndex && active === 0;
                return (
                  <View
                    key={item.key}
                    className={styles.songItem}
                    onClick={() => {
                      onSongeChange(index + 1);
                    }}
                  >
                    <Image
                      src={isActive ? item.imageActive : item.image}
                      className={styles.songItemImage}
                    />
                    <Text
                      style={{
                        textAlign: 'center',
                      }}
                    >
                      {item.name}
                    </Text>
                  </View>
                );
              })}
            </View>
          </ScrollView>
        </Tab>
        <Tab title={Strings.getLang('tab_1')}>
          <ScrollView
            scrollY
            style={{
              height: `calc(${height}px - 425px)`,
            }}
          >
            <View
              className={styles.songListBox}
              style={{
                height: `calc(${height} - 425px)`,
              }}
            >
              {SongList1.map((item, index) => {
                const isActive = index === currentIndex && active === 1;
                return (
                  <View
                    key={item.key}
                    className={styles.songItem}
                    onClick={() => {
                      onSongeChange(index + 1);
                    }}
                  >
                    <Image
                      src={isActive ? item.imageActive : item.image}
                      className={styles.songItemImage}
                    />
                    <Text
                      style={{
                        textAlign: 'center',
                        color: '#000',
                      }}
                    >
                      {item.name}
                    </Text>
                  </View>
                );
              })}
            </View>
          </ScrollView>
        </Tab>
        <Tab title={Strings.getLang('tab_2')}>
          <ScrollView
            scrollY
            style={{
              height: `calc(${height}px - 425px)`,
            }}
          >
            <View
              className={styles.songListBox}
              style={{
                height: `calc(${height} - 425px)`,
              }}
            >
              {SongList2.map((item, index) => {
                const isActive = index === currentIndex && active === 2;
                return (
                  <View
                    key={item.key}
                    className={styles.songItem}
                    onClick={() => {
                      onSongeChange(index + 1 + SongList1.length);
                    }}
                  >
                    <Image
                      src={isActive ? item.imageActive : item.image}
                      className={styles.songItemImage}
                    />
                    <Text
                      style={{
                        textAlign: 'center',
                        color: '#000',
                      }}
                    >
                      {item.name}
                    </Text>
                  </View>
                );
              })}
            </View>
          </ScrollView>
        </Tab>
        <Tab title={Strings.getLang('tab_3')}>
          <ScrollView
            scrollY
            style={{
              height: `calc(${height}px - 425px)`,
            }}
          >
            <View
              className={styles.songListBox}
              style={{
                height: `calc(${height} - 425px)`,
              }}
            >
              {SongList3.map((item, index) => {
                const isActive = index === currentIndex && active === 3;
                return (
                  <View
                    key={item.key}
                    className={styles.songItem}
                    onClick={() => {
                      onSongeChange(index + 1 + SongList1.length + SongList2.length);
                    }}
                  >
                    <Image
                      src={isActive ? item.imageActive : item.image}
                      className={styles.songItemImage}
                    />
                    <Text
                      style={{
                        textAlign: 'center',
                        color: '#000',
                      }}
                    >
                      {item.name}
                    </Text>
                  </View>
                );
              })}
            </View>
          </ScrollView>
        </Tab>
      </Tabs>
    </View>
  );
}
